<template>
  <div id="content2">
    <!-- 左边标语 -->
    <div id="c-1">
      <p style="font-size: 60px;font-weight: 500;">高收入&nbsp;&nbsp;好平台&nbsp;&nbsp;新机遇</p>
      <p style="font-size: 32px;">来这里,你值得更好的</p>
      <img style="height: 430px;" src="../../assets/img/content1.png" alt />
    </div>
    <!-- 登录界面 -->
    <div id="c-2" style="position: relative;">
      <button :class="[ bottom?'bt1':'bt2' ]" @click="inner2()" style="float:left">我要登录</button>
      <button :class="[ bottom?'bt2':'bt1' ]" @click="inner1()" style="float: left;">我要入驻</button>

      <br />
      <br />

      <div id="msg">
        <input
          v-model="user.userName"
          :placeholder="userPlace"
          id="userName"
          name="userName"
          type="text"
        />
        <input v-model="user.passWord" :placeholder="passPlace" style="margin-top: 30px" name="pwd" type="password" />
        <div>
          <input
            v-model="loginMsg.captcha"
            id="yanzheng"
            style="width: 60%;margin-top: 30px"
            type="text"
            placeholder="输入验证码"
          />
          <Captcha ref="Captcha" style="position: absolute;right: 20%;bottom: 33%"></Captcha>
        </div>


        <br>

        <span id="forget">忘记密码?</span>

        <button @click="login()" id="loginbt">登录<i v-if="loading" class="el-icon-loading"></i></button>
      </div>
    </div>
  </div>
</template>


<script>
import { login } from "../../network/main";
import Captcha from "../../components/common/Captcha";

export default {
  name: "App",
  components: {
    Captcha
  },
  data() {
    return {
      loading:false,
      user: {
        userName: "", //用户名
        passWord: "" //密码
      },
      loginMsg: {
        //loginMsg:登陆信息
        captcha: "", //验证码
      },
      userPlace: "输入用户名",
      passPlace: "输入密码",
      submitTxt: "登录",
      bottom: false,
      register: false
    };
  },
  methods: {
    login() {
      if (!this.user.userName) {
        this.$message.error("用户名不能为空!")
      } else if (!this.user.passWord) {
        this.$message.error("请填写密码~")
      } else if (!this.loginMsg.captcha) {
        this.$message.warning("请填写验证码~~")
      } else {
        this.loading=true
        login(this.user, this.loginMsg, returnCitySN["cip"])
          .then(res => {
            if (res.data.code == 100){
              this.$message({
                message: res.data.extend.msg,
                type: "warning"
              });
              this.$router.push('/home')
              console.log(res)
              this.$store.commit('SET_TOKEN', res.data.extend.token)
              localStorage.setItem("TOKEN",res.data.extend.token)
               localStorage.setItem("TOKEN",res.data.extend.token)
              localStorage.setItem('userId',res.data.extend.user.id)
              localStorage.setItem('userName',res.data.extend.user.userName)
              localStorage.setItem("userType",(res.data.extend.user.role).toLowerCase())
            } else {
              this.loading=false
              this.$message({
                message: res.data.extend.msg,
                type: "warning"
              });
              this.$refs.Captcha.refresh()
            }
          })
          .catch(err => {
            this.$message.error(err)
          });
      }
    },
    inner1() {
      this.bottom = true;
      this.$router.push("/main/register")
    },
    inner2() {
      this.bottom = false;
      this.resh();
    },
    toRegister() {
      this.register = true;
      this.$router.push("/main/register")
    },
  }
};
</script>

<style scoped>
body {
  margin: 0 auto;
  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
}

#content2 {
  box-sizing: border-box;
  width: 100%;
  height: 675px;
  padding: 50px 160px;
}

p {
  line-height: 10px;
}
#c-1 {
  float: left;
}

#c-2 {
  width: 388px;
  height: 480px;
  float: left;
  padding: 60px;
  box-sizing: border-box;
  background-color: #fff;
  margin-top: 20px;
  box-shadow: 0px 0px 16px rgb(180, 166, 166);
}

#c-2 input {
  border: none;
  background-color: #fff;
  width: 100%;
  height: 40px;
  margin-top: 30px;
  outline: none;
  border-bottom: 0.5px rgb(216, 204, 204) solid;
}

.bt1 {
  width: 48%;
  background-color: #fff;
  border: none;
  outline: none;
  cursor: pointer;
  font-size: 20px;
  color: rgb(184, 177, 166);
}

.bt2 {
  width: 48%;
  background-color: #fff;
  border: none;
  outline: none;
  cursor: pointer;
  font-size: 20px;
  border-bottom: orange 2px solid;
  color: black;
}

#loginbt {
  margin-top: 25px;
  width: 103%;
  height: 40px;
  background-color: rgb(255, 102, 68);
  border: none;
  outline: none;
  color: white;
  cursor: pointer;
}

#forget{
  color: blue;
  font-size: 14px;
  cursor: pointer;

}
</style>
